import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { getUserInforAPI, getUserProfileAPI } from '../api/userApi'

Vue.use(Vuex)
// 1.定义一个初始的,不含任何数据state对象
// 这个对象中,只有结构,没有真正的数据
// 今后,要新增全局共享的数据,只需要挂载到initState对象中即可

// 从localStorage 中读取数据
const stateStr = localStorage.getItem('state')
console.log(stateStr)

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    tokenInfo: {
      token: '',
      refresh_token: ''
    },
    // 用户的基本信息
    userInfo: {},
    userProfile: {}
  },
  mutations: {
    // 专门用来修改tokenInfo的方法
    // payload的格式为一个对象
    updateTokenInfo (state, payload) {
      state.tokenInfo = payload
      // 把修改过后的state数据源持久化,只要调用mutations就刷新一下数据
      localStorage.setItem('state', JSON.stringify(state))
    },

    updateUserInfo (state, payload) {
      state.userInfo = payload
      localStorage.setItem('state', JSON.stringify(state))
    },
    // 清空state和本地的数据
    clearState (state) {
      // 清空state
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}
      // 2.把清空后的state保存到本地
      localStorage.setItem('state', JSON.stringify(state))
    },
    // 更新用户简介信息
    updateUserProfile (state, payload) {
      state.userProfile = payload
      localStorage.setItem('state', JSON.stringify(state))
    }
  },
  actions: {
    // 初始化用户的基本信息
    async initUserInfo (ctx) {
      const { data: res } = await getUserInforAPI()
      if (res.message === 'OK') {
        console.log(res)
        ctx.commit('updateUserInfo', res.data)
      }
    },
    // 用户简介信息
    async initUserProfile (ctx) {
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        console.log(res.data)
        ctx.commit('updateUserProfile', res.data)
      }
    }

  },
  modules: {
  },
  getters: {
    avatar (state) {
      return state.userInfo.photo || 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  }
})
